<template>
    <div id='finance-wait'>
       <!--  <h1 class="card-title">
           <span>待放款记录</span>
       </h1> -->
        
        <div class="loading-min-height">
            <loading v-if='loading' mode='full'></loading>
            <transition name='fade'>
                <p class='no-data' v-if='!loading && !records.length'>暂无数据</p>
                <div class="table-list" v-if='records.length'>
                    <table>
                        <thead class="table-list__head">
                            <tr>
                                <th>序号</th>
                                <th>借款人</th>
                                <th>借款金额</th>
                                <th>借款时长</th>
                                <th>到账金额</th>
                                <th>服务费</th>
                                <th>开户银行</th>
                                <!-- <th>借款审核</th> -->
                                <th>银行卡号</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class='table-list__body have-border'>
                            <tr v-for='item in records'>
                                <td>{{ item.number || placeholder }}</td>
                                <td>{{ item.name || placeholder }}</td>
                                <td>{{ item.lendAmount | toYuan }}</td>
                                <td>{{ item.lendCycle || placeholder }}天</td>
                                <td>{{ item.lendRealAmount | toYuan }}</td>
                                <td>{{ item.serviceAmount | toYuan }}</td>
                                <td>{{ item.cardName || placeholder }}</td>
                                <!-- <td>{{ item.loanCheckOperator || placeholder }}</td> -->
                                <td>{{ item.cardNo || placeholder }}</td>
                                <td>
                                    <div class='option-box'>
                                       <!--  <span class='option-button' @click='goDetail(item.id)'>查看</span> -->
                                         <el-button type="success" @click="passFn(item.id)">放款</el-button>
                                         <el-button type="danger" @click="rejectFn(item.id)">拒绝</el-button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- <pagination
                        :current-page='listInfo.pageNum'
                        :total-page='listInfo.totalPage'
                        @pageChange='getList'></pagination> -->
                        <el-pagination class="pan"  @current-change="handleCurrentChange" :current-page="listInfo.pageNum"  layout="total,  prev, pager, next, jumper"
                         :total="listInfo.totalCount" :background="true">
                        </el-pagination>
                </div>
            </transition>
        </div>
        <modal  
            :show='show_modal_pass' 
            title='审核通过'
            :loading='loading_pass'
            @confirm='passHandle'
            @close='closePass'>
            <div class="modal-form-wrap">
                <div>您确定通过审核吗？</div>
            </div>
        </modal>
        <modal  
            :show='show_modal_reject' 
            title='审核拒绝'
            :loading='loading_reject'
            @confirm='rejectHandle'
            @close='closereject'>
            <div class="modal-form-wrap">
                <div>您确定通过审核吗？</div>
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { financeApi, authApi, allApi, lenderApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                placeholder:'--',
                recommend:0,
                curItem:{},
                showConfirm:false,
                showFreeze:false,
                sequence:{
                    value:'0',
                    text:'正序'
                },
                sort:{
                    value:'',
                    text:'默认'
                },
                title:'',
                tip:'',
                curRecommend:{
                    value:'',
                    text:'添加到最后'
                },
                curUserId:'',
                cancleRecommendType:{
                    value:'',
                    text:'请选择取消推荐类型'
                },
                recommendType:{
                    value:'',
                    text:'请选择推荐类型'
                },
                lendNumber:'',
                borrowNumber:'',
                show_modal_pass:false,
                loading_pass:false,
                show_modal_reject:false,
                loading_reject:false,
                show_modal_cancle_recommend:false,
                show_modal_recommend:false,
                show_modal_recommend1:false,
                show_modal_recommend2:false,
                show_modal_detail:false,
                loading_set_recommend:false,
                loading_freeze:false,
                loading_cancle_recommend:false,
                channel:'',
                channel1:'',
                channel2:'',
                name:'',
                name1:'',
                name2:'',
                userCount:'',
                curDetail:'',
                listInfo:{},
                listInfo1:{},
                listInfo2:{},
                records:[],
                records1:[],
                records2:[],
                dateFrom:'',
                dateFrom1:'',
                dateFrom2:'',
                dateTo:'',
                dateTo1:'',
                dateTo2:'',
                mobile:'',
                mobile1:'',
                mobile2:'',
                loading:true,
                loading1:true,
                loading2:true,
                loading_count:true,
                passId:"",
                rejectId:"",
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            //通过审核 kai 
            passHandle(){
                
                this.loading_confirm = true
                financeApi.pass({
                    id:this.passId,
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_pass = false
                    this.setMsgTip({
                        text:'放款成功',
                        type:'success'
                    })
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            },
            //审核通过model
            passFn(item){
                this.passId=item
                this.show_modal_pass=true;
            },
            rejectFn(item){
                this.rejectId=item
                this.show_modal_reject=true;
            },
            //通过审核 guan 
            closePass(){
                this.show_modal_pass=false;
            },
            //审核拒绝 kai
            rejectHandle(){
                this.loading_reject = true
                financeApi.reject({
                    id:this.rejectId,
                    //msg:this.rejectReason
                })
                .then(result=>{
                    this.loading_reject = false
                    this.show_modal_reject = false
                    this.setMsgTip({
                        text:'拒绝成功',
                        type:'success'
                    })
                })
                .catch(error => {
                    console.error(error)
                    this.loading_reject = false
                })
            },
            closereject(){
                this.show_modal_reject=false;
            },
             handleCurrentChange(val){
                //console.log(`当前页: ${val}`);
                this.getList(val)
            },
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            goDetail(id){
                this.$router.replace({
                    name:'finance-wait',
                    query:_.merge({},this.$route.query,{
                        num:this.listInfo.pageNum
                    })
                })
                this.$router.push({
                    name:'finance-detail',
                    params:{
                        id:id
                    }
                })
            },

            showModalDetail(item){
                this.show_modal_detail = true
                this.curDetail = item
            },
            getNumber(){
                allApi.borrowCount()
                .then(result=>{
                    this.borrowNumber = result
                })
                .catch(error => {
                    console.error(error)
                })
                allApi.lendCount()
                .then(result=>{
                    this.lendNumber = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            getList(num = 1){
                financeApi.waitChecklist({
                    pageSize:10,
                    pageIndex:num,
                })
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            confirmTip(){
                this.showConfirm = false
                this.setRecommend()
            },
            getAccount(){
                this.loading_count = true
                allApi.userCount()
                .then(result=>{
                    this.loading_count = false
                    this.userCount = result
                })
                .catch(error => {
                    console.error(error)
                    this.loading_count = false
                })
            },
            freeze(){
                this.loading_freeze = true
                allApi.freezeUser({
                    mobile:this.curItem.mobile
                })
                .then(result=>{
                    this.loading_freeze = false
                    this.setMsgTip({
                        text:'冻结用户成功！',
                        type:'success'
                    })
                })
                .catch(error => {
                    console.error(error)
                    this.loading_freeze = false
                })
            }
        },
        created(){
            let num = this.$route.query.num
            this.getList(num)
        }
    }
</script>
<style>
    #finance-wait .option-box .el-button{
        padding: 0;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        width: 80px;
    }
</style>
<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #user-index{
        padding:0 40px 20px 40px;
        box-sizing:border-box;
        overflow:auto;
        .user-data{
            padding-bottom: 20px;
        }
        .user-data__list{
            display:flex;
            padding-top: 20px;
            min-height:140px;
        }
        .user-data__item{
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items:center;
            width: 200px;
            height:120px;
            border:1px solid $sectionColor;
            border-radius:4px;
            box-shadow:rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            margin-right:20px;
            span{
                display: block;
                font-size: 30px;
                color:$green;
            }
            p{
                padding-top: 10px;
            }
        }
        .report-detail-button{
            color:$green;
            cursor:pointer;
        }
        .modal-recommend{
            .form-item__value{
                flex:1;
            }
            min-height:330px;
        }
    }
.table-list__head tr th{
    text-align: center;
}
 body .table-list__body.have-border td{
    text-align: center;
}
</style>
